<template>
  <div class="main">
    <div class="inventory">
      <div class="inventory__wrapper">
        <div class="inventory__wrapper-content">
          <div class="slot" v-for="(item, index) in dataList" :key="item.Slot">
            <!-- {{ fillProps(item, index + 1) }} -->
            <template v-if="item.NbtJson?.id">
              <img :src="getItemImg(item.NbtJson.id || '')" @error="imgError" class="item" />
            </template>
            <template v-if="item.NbtJson && item.NbtJson?.Count">
              <div class="durability">
                <div class="durability-value"></div>
              </div>
            </template>
            <div class="tooltip" v-show="item.NbtJson">
              <p class="sle">{{ getItemName(item.NbtJson?.id || "") }}</p>
              <div class="tool-addtional" v-if="item.NbtJson?.tag">
                <template v-for="tip in item.NbtJson.tag">
                  <p>
                    <span class="tip-name">{{ tip }} </span>
                    <span class="tip-residue">（{{ tip }}）</span>
                  </p>
                </template>
              </div>
              <div class="none-effect" v-else>无效果</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { PropType, toRaw } from "vue";

import type { ToolDataType } from "./type";
import type { SlotItem } from "@/types/player";

const testUrl = "http://cdn2.xintianyuehui.cn/2022PicGo202207181118973.png";
const resourceUrl = "https://cdn.jsdelivr.net/gh/wuxin0011/web-cdn-resource@main/block/image/block";

//列：7格 <div :class="{ 'has-logo': showSidebarLogo }" >
//行：3格
// { name: string, icon: string, val: string, slot: number, count: string }

const props = defineProps({
  list: {
    type: Array as PropType<SlotItem[]>,
    default: () => [] as ToolDataType[],
  },
});

let defaultContetn: ToolDataType = {
  ItemData: {},
  ItemType: "",
  NbtId: 0,
  Slot: 0,
  WareHouseId: 0,
};

let arr: ToolDataType[] = Array.from({ length: 21 }, (_, i) =>
  Object.assign({}, defaultContetn, { Slot: i + 1 })
);

const dataList = computed(() => {
  const list = props.list;
  console.log(list);
  arr = arr.map((item) => {
    const findItem = list.find(({ Slot }) => Slot === item?.Slot);
    return toRaw(findItem) ?? item
  })
  return arr;
});

const fillProps = (item: ToolDataType, index: number) =>
  item?.NbtJson?.id || `${index}-${item?.NbtJson?.id}`;

const getItemName = (item: string) => item.substring(10);

const getItemImg = (item: string) => {
  const blockName = getItemName(item);
  return `${resourceUrl}/${blockName}.png`;
}

const imgError = (e: any) => {
  console.log("image", e);
  e.src = "/logo.png";
};
</script>
<style lang="scss" scoped>
.main {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .inventory {
    border: 1px solid #000;
    border-radius: 5px;

    &__wrapper {
      padding: 5px;
      border-radius: 5px;
      // border: 5px solid #fff;
      // border-color: #FFF #373737#373737 #FFF;
      // border-width: 5px 3px 3px 5px;
      background-image: linear-gradient(155.7deg,
          #fff 0%,
          #fff 50%,
          #555 50%,
          #555 100%);

      @media (max-width: 650px) {
        background-image: linear-gradient(114.4deg,
            #fff 0%,
            #fff 50%,
            #555 50%,
            #555 100%);
      }

      &-content {
        padding: 10px;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-gap: 0px;
        background-color: #c5c5c5;
        border-radius: 5px;

        @media (max-width: 650px) {
          grid-template-columns: repeat(3, 1fr);
        }

        .slot {
          width: 80px;
          height: 80px;
          background-color: #8a8a8a;
          border: 3px solid;
          border-color: #373737 #fff #fff #373737;
          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
          font-weight: bold;
          position: relative;
          cursor: pointer;

          &:hover .tooltip {
            display: block;
            z-index: 100;
          }
        }

        .item {
          width: 32px;
          height: 32px;
        }

        .durability {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 10px;
          background-color: red;

          &-value {
            width: 80%;
            /* Change this value to represent the durability percentage */
            height: 100%;
            background-color: lime;
          }
        }

        .tooltip {
          max-width: 100px;
          display: none;
          position: absolute;
          top: 43px;
          left: -28px;
          background-color: rgba(31, 31, 31, 0.9);
          padding: 5px;
          border-radius: 3px;
          font-size: 14px;

          .tool-addtional {
            color: #fc5454;
          }

          .none-effect {
            font-size: 12px;
            opacity: 0.7;
          }
        }
      }
    }
  }
}</style>
